<template>
  <section v-if="row.toAddress"
           class="shipment-sender-info">
    <p>{{ area || '--'}}<br />{{ address }}</p>
  </section>
</template>

<script>
export default {
  name: "ConsigneeSenderAddress",
  props: {
    row: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    area () {
      const { toAddress: { province, city, district } } = this.row;
      return `${province}${city}${district}`
    },
    areaSymbol () {
      const { toAddress: { province, city, district } } = this.row;
      return `${province}/${city}/${district}/`
    },
    address () {
      const { toAddress: { address } } = this.row;
      if (address && address.includes(this.area)) {
        return address.substring(this.area.length, address.length)
      }
      if (address && address.includes(this.areaSymbol)) {
        return address.substring(this.areaSymbol.length, address.length)
      }
      return address
    },
  },
};
</script>
<style scoped>
.shipment-sender-info p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.red {
  color: var(--prev-color-text-red);
}
</style>
